<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<body>
<div id="popups-form-box">
    <div class="popups-window">
        <form>
            <a class="close" href="#">X</a>
            <!--
            TNovel(id=1, novelGroupId=1, name=文章1, synopsis=没什么好介绍的，因为这个是测试文章，没什么内容，简介1,
            status=1, updateTime=Mon Oct 18 16:38:00 CST 2021, createTime=Mon Oct 18 16:38:00 CST 2021,
            novelGroup=TNovelGroup(id=1, name=文章分类1, createTime=Mon Oct 18 16:35:00 CST 2021))
            -->
            <span class="title">添加评论</span>
            <div class="main">
                <table>
                    <tbody>
                    <tr>
                        <td><span class="label">所属文章：</span></td>
                        <td><input autocomplete="off" maxlength="10" minlength="1" name="name" disabled
                                   required
                                   th:value="${novel.name}" type="text">
                        </td>
                        <td>
                            <input hidden name="novelId" th:value="${novel.id}" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td><span class="label">评论内容：</span></td>
                        <td>
                            <textarea maxLength="2000" minLength="1" name="content" placeholder="1~2000位字符"
                                      required></textarea>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="button-box">
                <input type="submit" value="确定">
                <a class="no" href="#">关闭</a>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    // 监听关闭按钮
    $('#popups-form-box > .popups-window > form > .close').click(function (e) {
        e.preventDefault();
        $('#popups-box').hide();
        window.location.reload();
    });
    $('#popups-form-box > .popups-window > form > .button-box > .no').click(function (e) {
        e.preventDefault();
        $('#popups-box').hide();
        window.location.reload();
    });

    // 监听表单提交
    $('#popups-form-box > .popups-window > form').submit(function () {
        // 获取数据
        let id = $('#popups-form-box input[name="novelId"]').val();
        let name = $('#popups-form-box input[name="name"]').val();
        let content = $('#popups-form-box textarea[name="content"]').val();
        // alert(name + content + id)
        // 数据校验
        // if (novelId === '0') {
        //     window.alert('请选择所属文章');
        //     return false;
        // }

        // 提交数据
        $('#popups-form-box .main').html(`<span>数据提交中...</span>`);
        $.ajax({
            url: 'add_comment',
            type: "POST",
            data: {
                'id': id,
                'novelName': name,
                'content': content
            },
            success: function (res) {
                $('#popups-form-box input[type="submit"]').remove();
                $('#popups-form-box .main').html(res);
            }
        });

        return false;
    });
</script>
</body>
</html>
